<template>
  <div class="userlist">
    <h3>帐号列表</h3>
    <!-- @selection-change="handleSelectionChange"获取当前checkbox选中的表格索引 -->
    <el-table
      :data="list"
      @selection-change="handleSelectionChange"
      ref="listtable"
      style="
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1;box-sizing: border-box);
      "
    >
      <!-- ref,vue的id设置 -->
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="帐号" prop="account"></el-table-column>
      <el-table-column label="用户组" prop="userGroup"></el-table-column>
      <el-table-column label="创建时间" prop="ctime"></el-table-column>
      <el-table-column
        label="操作"
        width="180px
      "
      >
        <!-- template上有个slot-scope上面的形参为当前行数的数据 -->
        <template slot-scope="item">
          <el-button :disabled="dis" @click="clickagain(item.row)"
            >编辑</el-button
          >
          <!-- 当前行数的row是行数数据,$index是索引 -->
          <el-button type="danger" @click="clickdel(item.row)"
            >删除</el-button
          ></template
        >
      </el-table-column>
    </el-table>
    <div class="userlist-page">
      <div class="block">
        <!-- 
          @size-change表示条数下拉框改变
          @current-change表示当前页数改变
          :current-page当前在第几页
          :page-sizes分页的页数
          :page-size当前页面显示多少条
          :total总条数
          layout渲染到页面的组件(可以删除和改变位置)
         -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="nowpage"
          :page-sizes="pagetip"
          :page-size="showpage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <div class="userlist-botton" style="width: 220px">
        <template>
          <!--  @click="delall" -->
          <el-button @click="delall" :disabled="edit" type="danger"
            >批量删除</el-button
          >
          <el-button @click="unselect" type="primary"
            >取消选择</el-button
          ></template
        >
      </div>
    </div>
    <!-- <div
      class="userlist-change"
      v-show="showagain"
      style="border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"
    >
      <div class="userlist-name">
        <span>帐号:</span>
        <el-input v-model="changeuser"></el-input>
      </div>
      <div class="userlist-group">
        <span>用户组:</span>
        <el-select v-model="changegroup" style="width: 100%">
          <el-option
            v-for="item in useroptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <el-button class="userlist-save" @click="userlistsave">保存</el-button>
    </div> -->
    <el-dialog title="修改帐号信息" width="400px" :visible.sync="showagain">
      <div class="userlist-name">
        <span>帐号:</span>
        <el-input v-model="changeuser"></el-input>
      </div>
      <div class="userlist-group">
        <span>用户组:</span>
        <el-select v-model="changegroup" style="width: 100%">
          <el-option
            v-for="item in useroptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showagain = false">取 消</el-button>
        <el-button type="primary" @click="userlistsave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入ajax获取列表,删除帐号,批量删除 ,修改帐号}
import { userlist, deluser, changelistname, delalluser } from "@/apis/user";
// 引入utils
import { YMD } from "@/utils/utils";
export default {
  methods: {
    // 当前页面显示多少条
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      // 先赋值给动态数据
      this.showpage = val;
      // 再调用函数,这时函数的参数等于赋值后的动态数据,所以会转换
      this.functionget();
    },
    // 当前移动到哪个界面
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      // 先赋值给动态数据
      this.nowpage = val;
      // 再调用函数,这时函数的参数等于赋值后的动态数据,所以会转换
      this.functionget();
    },
    // 封装获取用户组列表函数
    functionget() {
      // 发送ajax获取用户组列表
      userlist({ currentPage: this.nowpage, pageSize: this.showpage }).then(
        (res) => {
          // 遍历获得每个国际时间
          for (const cuttime of res.data.data) {
            // 遍历获得每个国际时间
            // let now = new Date(cuttime.ctime);
            // // 获得的事件再转换为当前时区时间
            // now =
            //   now.getFullYear() +
            //   "/" +
            //   (now.getMonth() + 1) +
            //   "/" +
            //   now.getDate();
            // // 再将转换后的时间赋给用户组里的时间
            // cuttime.ctime = now;
            cuttime.ctime = YMD(cuttime.ctime);
          }
          this.list = res.data.data;
          // 总数据条数
          this.total = res.data.total;
          // console.log(this.total);
        }
      );
    },
    // 点击删除事件
    clickdel(i) {
      // console.log(i.id);
      // 删除传入当前id
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deluser({ id: i.id }).then(() => {
            // console.log(res);
            // 删除后再加载函数
            this.functionget();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 获得批量删除,参数为当前行数的信息
    handleSelectionChange(val) {
      // 将获取到的数组赋给前面的动态数据
      // this.multipleSelection = val;
      this.ids = val.map((val) => val.id);
      // console.log(this.ids);
      if (this.ids.length == 0) {
        this.edit = true;
        return;
      } else {
        this.edit = false;
      }
    },
    delall() {
      // 还要判定数组不为空,才进行操作
      // if(this.ids.length>0){

      // }
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delalluser({
            //需要转为字符串格式
            ids: JSON.stringify(this.ids),
          }).then(() => {
            // 调用一次函数
            this.functionget();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 点击编辑之后
    clickagain(i) {
      // console.log(111);
      // 显示模态框
      this.showagain = true;
      // console.log(i);
      // 将id,用户名,和用户组,赋给上面的动态值
      this.changeid = i.id;
      this.changeuser = i.account;
      this.changegroup = i.userGroup;
      // console.log(this.changeid, this.changeuser, this.changegroup);
    },
    // 保存用户名之后
    userlistsave() {
      this.dis = true;
      setTimeout(() => {
        this.dis = false;
      }, 1000);
      // 发送ajax请求,传入三个值
      changelistname({
        id: this.changeid,
        account: this.changeuser,
        userGroup: this.changegroup,
      }).then(() => {
        // console.log(res);
        this.showagain = false;
        this.functionget();
        this.$message({
          message: "恭喜你，用户数据编辑成功",
          type: "success",
        });
      });
    },
    unselect() {
      // this.$refs.vue的id,最快获取dom节点的操作,没有之一
      this.$refs.listtable.clearSelection();
    },
  },
  data() {
    return {
      dis: false,
      edit: true,
      changeid: 0,
      // 假设当前的用户名为空
      changeuser: "",
      // 默认当前下拉框选择的名
      changegroup: "普通管理员",
      showagain: false,
      go: "",
      pagego: "",
      list: [],
      // 将数组默认为空
      multipleSelection: [],
      vallist: [],
      useroptions: [
        {
          value: "普通管理员",
          label: "普通管理员",
        },
        {
          value: "超级管理员",
          label: "超级管理员",
        },
      ],
      // 当前在第几页
      nowpage: 1,
      // 总数据条数
      pagetip: [5, 10, 15, 20],
      // 当前页面显示多少条
      showpage: 5,
      // 分页条数
      total: 0,
    };
  },
  created() {
    // 数据初始化完毕时调用一次函数加载表格
    this.functionget();
  },
};
</script>

<style lang="less" scoped>
@import url("../../../assets/styles/themes.less");
.userlist {
  margin: 20px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 0 20px 20px 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  h3 {
    line-height: 60px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
  }
  .userlist-page {
    width: 50%;
    justify-content: space-between;
    display: flex;
    line-height: 60px;
    margin-bottom: 20px;
    margin-top: 20px;
    flex-direction: column;
    .el-icon-arrow-left,
    .el-icon-arrow-right {
      line-height: 60px;
    }
    .userlist-page-go {
      display: flex;
    }
  }
  // .userlist-change {
  //   display: flex;
  //   flex-direction: column;
  //   width: 300px;
  //   height: 200px;
  //   position: absolute;
  //   top: 50%;
  //   left: 50%;
  //   margin-left: -150px;
  //   margin-top: -100px;
  //   background-color: @tintcolor2;
  //   border-radius: 4px;
  //   justify-content: space-around;
  //   .userlist-save {
  //     text-align: center;
  //     width: 80px;
  //     margin-left: 110px;
  //   }
  .userlist-name,
  .userlist-group {
    display: flex;
    flex-direction: column;
    span {
      width: 100px;
      line-height: 37px;
      margin: 3px 0;
    }
  }
  // }
}
</style>